<template>
  <div class='u-attr-search' style='width: 100%'>
    <div class='list'>
      <div class='item' v-for='(v, idx) in courseClassList' :key='v.id'>
        <span class="name">{{ v.name }}</span>
        <el-select multiple  clearable class='form-content' v-model='v.selectedClass' v-if='v.value_type === "0"'
                   @change='getChildClasses'>
          <el-option
            v-for='(classes, classesIndex) in v.classes' :key='classesIndex'
            :value="classes.id"
            :label="classes.name"
          />
        </el-select>
        <div v-else class='form-content'>
          <el-input v-model.trim='v.selectedClass' type='text' placeholder="请输入内容"/>
        </div>
        <!-- 二级 -->
        <el-select clearable v-model='v.selectedClassChild' v-if='v.value_type === "0" && v.classesChild.length'
                   style='margin-left: 20px'>
          <el-option
            v-for='(classes, classesIndex) in v.classesChild' :key='classesIndex'
            :value="classes.id"
            :label="classes.name"
          />
        </el-select>
        <el-checkbox v-model="checked[idx]" style="margin-left: 10px">设为sku</el-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'uAttrSearch',

    props: ['isNotGetAttrsData', 'aType'],

    data() {
      return {
        courseClassList: [],
        checked: []
      }
    },

    mounted() {
      if (this.isNotGetAttrsData) return false
      this.getAttributes()
      this.checked = Array(20).fill(false) // 创建数组冰赋值
    },

    methods: {
      formatAttrsData(data) {
        this.courseClassList = []
        const arr = []
        // 过滤不需要的
        const tmp = data.list.filter(v => v.is_query === '1' && ((v.value_type === '0' && v.value) || v.value_type === '1'))
        tmp.forEach(async v => {
          v.classes = []
          v.selectedClass = ''
          v.classesChild = []
          v.selectedClassChild = ''
          arr.push(new Promise(async resolve => {
            v.classes = await this.getClasses(v.id, v.value_type)
            resolve()
          }))
        })
        Promise.all(arr).then(() => {
          this.courseClassList = tmp.map(v => v)
        })
      },

      $getAttrsData(data) {
        this.formatAttrsData(data)
      },

      async getAttributes() {
        const {code, data} = await this.$api.utilsGetAttributes({
          aMerchantId: this.aFirmId,
          aType: this.aType
        })
        if (code === 0) {
          this.formatAttrsData(data)
        }
      },

      async getClasses(aAttributeId, type) {
        if (type === '1') return []
        const {code, data} = await this.$api.utilsGetClass({aAttributeId})
        return code === 0 ? data.list : []
      },

      async getChildClasses(aClassId) {
        console.log(aClassId)
        const {index} = this.getAttrByClassId(aClassId)
        // 获取到对应的属性
        const {code, data} = await this.$api.utilsGetClass({aClassId})
        if (code === 0) {
          this.courseClassList[index].classesChild = data.list
          console.log(this.courseClassList[index])
        }
        this.$emit('handelData', this.handleData(), this.checked)
      },

      getAttrByClassId(value) {
        let obj = {}
        let index = -1
        this.courseClassList.forEach((v, i) => {
          v.classes.forEach(classes => {
            if (classes.id === value) {
              obj = v
              index = i
            }
          })
        })
        return {
          obj,
          index
        }
      },

      clear() {
        this.courseClassList.forEach(v => {
          v.selectedClass = ''
          v.classesChild = []
          v.selectedClassChild = ''
        })
      },

      // 返回 classID 数组
      getData() {
        const arr = []
        this.courseClassList.forEach(v => {
          if (!v.selectedClass && !v.selectedClassChild) return false
          if (v.selectedClass) {
            arr.push({
              aId: v.id,
              aValue: v.selectedClass
            })
          }
          if (v.selectedClassChild) {
            arr.push({
              aId: v.id,
              aValue: v.selectedClassChild
            })
          }
        })
        return arr
      },
      // 返回适合商品详情页用的数据
      handleData() {
        const namesArray = []
        const idsArray = []
        for (let i = 0; i < this.courseClassList.length; i++) {
          let v = this.courseClassList[i]
          const nameArr = []
          const idArr = []
//          if (!v.selectedClass && !v.selectedClassChild) return false
          if (v.selectedClass) {
            v.classes.forEach(classItem => {
//              if (classItem.id === v.selectedClass) classArr.push({sId: classItem.id, sName: classItem.name})
              if (classItem.id === v.selectedClass) {
                nameArr.push(classItem.name)
                idArr.push(classItem.id)
              }
            })
          }

          if (v.selectedClassChild) {
            v.classesChild.forEach(childItem => {
//              if (childItem.id === v.selectedClassChild) classArr.push({sId: childItem.id, sName: childItem.name})
              if (childItem.id === v.selectedClassChild) {
                nameArr.push(childItem.name)
                idArr.push(childItem.name)
              }
            })
          }
          // 当设置为sku的时候才添加进数组
          if (this.checked[i]) {
            namesArray.push(nameArr)
            idsArray.push(idArr)
          }
        }
        return {
          namesArray,
          idsArray
        }
      }
    }
  }
</script>

<style lang='less'>
  .u-attr-search {
    .list {
      display: flex;
      flex-wrap: wrap;
    }
    .item {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      // margin-right: 5px;
      width: 50%;
      box-sizing: border-box;
      .name {
        width: 80px;
        padding-right: 12px;
        text-align: right;
        font-size: 14px;
        box-sizing: border-box;
      }
    }
    .form-content {
      flex: 1;
    }
  }
</style>
